<template>
  <div>
    <div class="main" v-for="(item, i) in $store.state.goodsDetail" :key="i">
      <div class="swiper">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item1, i) in swiperList" :key="i">
            <img :src="item1.src" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="goodInfo">
        <div class="goodInfo-title">{{ item.title }}</div>
        <p>
          市场价：
          <span>¥{{ item.market_price }}</span> 销售价：
          <em>¥{{ item.sell_price }}</em>
        </p>
        <div class="count">
          <span>购买数量：</span>
          <van-stepper v-model="value" />
        </div>
        <div class="btns">
          <van-button type="info" class="btns-1">立即购买</van-button>
          <van-button type="danger" class="btns-2" @click="getLocohost">加入购物车</van-button>
        </div>
      </div>
      <div class="goodParams">
        <div class="title">商品参数</div>
        <div class="body">
          <p>商品货号: {{ item.goods_no }}</p>
          <p>库存情况: {{ item.stock_quantity }}件</p>
          <p>上架时间: {{ item.add_time }}</p>
        </div>
        <div class="btnsLong">
          <van-button type="info" block :plain="true">图文介绍</van-button>
          <van-button type="danger" block :plain="true">商品评论</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      // 购买数量
      value: 1,
      // 图片列表
      swiperList: [],
      goodsDetail: []
    }
  },
  created() {
    this.getSwiperList()
    // 获取商品详情
    //  var list = [];
    //  this.$store.commit('initList', list);
    // this.$store.dispatch('getGoodsDeatil')
    this.getGoodsDeatil()
  },

  methods: {
    // 获取图片
    async getSwiperList() {
      const res = await this.$http.get('/api/getthumimages/' + this.$route.params.id)
      this.swiperList = res.data.message
    },
    // 获取商品详情
    async getGoodsDeatil() {
      const { data: res } = await this.$http.get('/api/goods/getinfo/' + this.$route.params.id)
      this.goodsDetail = res.message
      console.log(this.goodsDetail)
      this.$store.commit('initList', res.message)
    },
    // 进行获取本地数据
    getLocohost() {
      if (!localStorage.getItem('car')) {
        var arr = []
        var obj = {
          id: this.$route.params.id,
          count: this.value,
          price: this.goodsDetail[0].sell_price,
          deleted: true
        }
        arr.push(obj)
        arr = JSON.stringify(arr)
        localStorage.setItem('car', arr)
      } else {
        var arr1 = localStorage.getItem('car')
        arr1 = JSON.parse(arr1)
        var index = false
        var num = 0
        arr1.forEach((item, i) => {
          if (item.id == this.$route.params.id) {
            index = i
            num = 1
          }
        })
        if (num) {
          arr1[index].count += this.value
          arr1 = JSON.stringify(arr1)
          localStorage.setItem('car', arr1)
        } else {
          var arr2 = []
          var obj2 = {
            id: this.$route.params.id,
            count: this.value,
            price: this.goodsDetail[0].sell_price,
            deleted: true
          }
          arr2.push(obj2)
          var arr4 = localStorage.getItem('car')
          arr4 = JSON.parse(arr4)
          var arr5 = []
          arr2 = arr5.concat(arr4, arr2)
          localStorage.setItem('car', JSON.stringify(arr2))
        }
      }
      this.value = 1
      this.getNum()
    },
    // 进行获取商品的数量
    getNum() {
      if (!localStorage.getItem('car')) return
      var arr = localStorage.getItem('car')
      arr = JSON.parse(arr)
      var num = 0
      arr.forEach(item => {
        num += item.count
      })
      this.$store.state.num = num
    }
  }
}
</script>
<style lang="css" scoped>
.main {
  /* width: 100%; */
  /* height: 700px; */
  padding: 10px;
}
.swiper {
  /* width: 100%; */
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.van-swipe {
  text-align: center;
}
.van-swipe img {
  width: 100%;
  height: 100%;
}
.goodInfo {
  margin-top: 10px;
  height: 158px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.goodInfo p {
  font-size: 14px;
  color: #8f8f94;
}
.goodInfo p span {
  margin: 0 10px;
  text-decoration: line-through;
}
.goodInfo p em {
  font-weight: 700;
  font-size: 16px;
  color: red;
  font-style: normal;
}
.goodInfo-title {
  border-bottom: 1px solid #ccc;
}
.van-stepper {
  display: inline-block;
  margin-left: 10px;
}
.btns {
  margin-top: 10px;
  height: 30px;
}
.btns-1 {
  margin-right: 5px;
}
.goodParams {
  margin-top: 10px;
  height: 250px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.title {
  font-size: 17px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.body {
  border-bottom: 1px solid #ccc;
  padding: 15px;
}
.body p {
  font-size: 14px;
  margin: 10px 0;
  color: #8f8f94;
}
.btnsLong {
  margin-top: 10px;
}
.btnsLong .van-button {
  height: 39px;
  border-radius: 5px;
  margin: 5px 0;
}
</style>
